<style lang="less" rel="stylesheet/less" type="text/less" scoped>
       .v-admin-get-applist-views{
           padding: 20px;
       }
</style>
<template>
	<div class="v-admin-get-applist-views">
		<div v-if="is_showLook">
			<Look
				:skin-record="skinRecord"
				:loading="table_loading"
				@toIndex="toIndex"
				@delete="deleteRecord"
			/>
			<br>
			<!-- 分页组件 -->
			<Row
				type="flex"
				justify="center"
			>
				<Page
					:total="skinRecord_total"
					:current="look_page_info.page"
					:page-size="look_page_info.per_page"
					placement="top"
					show-sizer
					show-total
					@on-change="look_pageChange"
					@on-page-size-change="look_perPageChange"
				/>
			</Row>
		</div>
		<div v-else>

			<user-search-form
				@search="confirmSearch"
			/>
			<Index
				:app-list="appList"
				:loading="table_loading"
				@look="userSkin"
			/>
			<br>
			<!-- 分页组件 -->
			<Row
				type="flex"
				justify="center"
			>
				<Page
					:total="appList_total"
					:current="page_info.page"
					:page-size="page_info.per_page"
					placement="top"
					show-sizer
					show-total
					@on-change="pageChange"
					@on-page-size-change="perPageChange"
				/>
			</Row>

		</div>

	</div>

</template>
<script>
import qs from 'qs';
import { mapMutations } from 'vuex';
import Index from './index.vue';
import Look from './look.vue';
import userSearchForm from './user-search-form';
import { deleteEmptyValue } from 'src/utils/utils';

export default {
	components: {
		Index,
		Look,
		userSearchForm,
	},
	data() {
		return {
			table_loading: false, // 表格更新时的loading

			is_showLook: false,

			appList: [],

			skinRecord: [],

			appList_total: 1,

			skinRecord_total: 1,

			request_skinId: null,

			page_info: {
				// 分页信息
				page: 1,
				per_page: 20,
				phone: null,

				gender: '',

				start_time: '',

				end_time: '',

			},
			search_info: {

				page: 1,
				per_page: 20,
			},

			look_page_info: {
				// 分页信息
				page: 1,
				per_page: 20,

			},
			look_search_info: {

				page: 1,
				per_page: 20,
			},

		};
	},
	created() {
		this.getAPPList(this.page_info);
	},
	methods: {
		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
       * 用户列表页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		pageChange(page) {
			this.search_info.page = page;
			this.search_info.per_page = this.page_info.per_page;
			this.getAPPList(this.search_info);
		},


		/**
       * 用户列表每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		perPageChange(size) {
			this.search_info.per_page = size;
			this.page_info.per_page = size;
			this.getAPPList(this.page_info);
		},

		/**
       * 测肤记录列表页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		look_pageChange(page) {
			this.look_search_info.page = page;
			this.look_search_info.per_page = this.look_page_info.per_page;
			this.userSkinpage(this.request_skinId, this.look_search_info);
		},


		/**
       * 测肤记录列表每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		look_perPageChange(size) {
			this.look_search_info.per_page = size;
			this.look_page_info.per_page = size;
			this.userSkinpage(this.request_skinId, this.look_page_info);
		},

		// 请求用户列表
		getAPPList(param) {
         	this.showSpin();

			const query_str = qs.stringify(deleteEmptyValue(param));

			this.$http.get(`${window.location.origin}/api/v1/admin/app-user?${query_str}`)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.appList = data.data.data;
					this.appList_total = data.data.total;
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(this.closeSpin);
		},

		// id查看用户肤质检测记录
		userSkin(id) {
			this.showSpin();
			this.is_showLook = true;

			this.request_skinId = id;

			this.$http.get(`${window.location.origin}/api/v1/admin/user-skin/user/${id}`)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.skinRecord = data.data.data;
					this.skinRecord_total = data.data.total;
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(this.closeSpin);
		},

		// 分页查看用户肤质检测记录
		userSkinpage(id, param) {
			this.showSpin();
			this.is_showLook = true;
			const query_str = qs.stringify(param);

			this.$http.get(`${window.location.origin}/api/v1/admin/user-skin/user/${id}?${query_str}`)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.skinRecord = data.data.data;
					this.skinRecord_total = data.data.total;
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(this.closeSpin);
		},

		// 切回用户测肤列表
		toIndex() {
			this.is_showLook = false;

			this.page_info.phone = '';

			this.page_info.gender = '';

			this.page_info.start_time = '';

			this.page_info.end_time = '';

			this.page_info.page = 1;

			this.page_info.per_page = 20;

			this.getAPPList(this.page_info);
		},

		// 删除指定用户测肤记录
		deleteRecord(id) {
			this.$Modal.confirm({

				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					const param = {

						_method: 'DELETE',
						record_id: id,

					};
					this.table_loading = true;

					this.$http.post(`${window.location.origin}/api/v1/admin/user-skin/records/delete`, param)

						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.userSkinpage(this.request_skinId, this.look_search_info);

							this.$Message.success(this.$t('common.delete_success'));
						})

						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})

						.then(() => { this.table_loading = false; });
				},
				onCancel: () => {},

			});
		},

		// 确认搜索方法
		confirmSearch({
			phone, gender, start_time, end_time,
		}) {
			this.page_info.phone = phone || '';

			this.page_info.gender = gender || '';

			this.page_info.start_time = start_time || '';

			this.page_info.end_time = end_time || '';


			this.search_info = JSON.parse(JSON.stringify(this.page_info));

			this.getAPPList(this.page_info);
		},

	},
};
</script>
